/*
 * @Author: AskMeWhy 
 * @Date: 2020-06-16 23:41:05 
 * @Last Modified by: AskMeWhy
 * @Last Modified time: 2020-12-14 11:46:50
 */

$page-color:(
    10: #d32f2f,
    20: #1976d2,
    30: #7b1fa2,
    40: #afb42b,
    50: #ffa000,
    60: #c2185b,
    70: #5d4037
);
$page-font-color: #f1f1f1;
$page-header-transition-duration: 300ms;
$page-header-transition-timing-function: linear;
.page-header-box{
    width: 100%;
    position: relative;
    height: 4rem;
    .page-base-header.sticky &{
        position: static;
    }
    .page-header__container{
        width: 100%;
        height: 100%;
        background: map-get($page-color,20);
        color: $page-font-color;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 2;
        .page-base-header.sticky &{
            position: absolute;
            top: 0;
            bottom: auto;
        }
    }
    .page-header__box{
        position: relative;
        z-index: 2;
        width: 80%;
        margin: 0 auto;
        height: 100%;
        @include flexLayout(flex,center,center);
        background: transparent;
        font-size: .36rem;
        transition-property: font-size;
        transition-duration: $page-header-transition-duration;
        transition-timing-function: $page-header-transition-timing-function;
        .page-base-header.sticky &{
            font-size: .24rem;
        }
    }
    .page-header__cover{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        background-size: 100% auto;
        background-position: center;
        background-repeat: no-repeat;
        filter: blur(8px);
        opacity: .8;
    }
}
